<template>
  <PageWrapper title="软件价格">
    <div id="price">
      <a-card>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="{ position: ['bottomLeft'] }"
        >
        </a-table>
      </a-card>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { PageWrapper } from '/@/components/Page'
  import { cloneDeep } from 'lodash-es'
  import type { TableProps } from 'ant-design-vue'
  import { reactive, ref } from 'vue'
  import type { UnwrapRef } from 'vue'
  interface DataType {
    // key: string
    // name: string
    // age: number
    address: string
  }

  const rowSelection: TableProps['rowSelection'] = {
    columnTitle: '选择',
    type: 'radio',
    onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    },
    // getCheckboxProps: (record: DataType) => ({
    //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //   name: record.name,
    // }),
  }
  const columns = [
    {
      title: '软件名字',
      dataIndex: 'name',
    },
    {
      title: '短租',
      children: [
        {
          title: '租金',
          dataIndex: 'home',
          width: 100,
        },
        {
          title: '天数',
          dataIndex: 'software',
          width: 100,
        },
      ],
    },
    {
      title: '长租',
      children: [
        {
          title: '租金',
          dataIndex: 'home',
          width: 100,
        },
        {
          title: '天数',
          dataIndex: 'software',
          width: 100,
        },
      ],
    },
    {
      title: '购买价格',
      dataIndex: 'name',
    },
  ]
  interface DataItem {
    key: string
    name: string
    age: number
    address: string
  }
  const data: DataItem[] = []
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i.toString(),
      name: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    })
  }

  const dataSource = ref(data)
  const editableData: UnwrapRef<Record<string, DataItem>> = reactive({})

  const edit = (key: string) => {
    editableData[key] = cloneDeep(dataSource.value.filter((item) => key === item.key)[0])
  }
  const save = (key: string) => {
    Object.assign(dataSource.value.filter((item) => key === item.key)[0], editableData[key])
    delete editableData[key]
  }
  const cancel = (key: string) => {
    delete editableData[key]
  }
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }

  #price {
    .btn-group {
      display: flex;
      justify-content: end;
      margin-top: 20px;
    }
  }
</style>
